<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body {
            position: relative;
        }
        .title {
            position: absolute;
            left: 500px;
        }
    </style>
</head>
<body>
<br>
<br>
<br>
<br>
<h3>
    <form class="layui-form" action="" onsubmit="return false;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户地址</label>
                <div class="layui-input-inline">
                    <select id="address" name="address" lay-verify="required" lay-search="">
                    </select>
                </div>
                <button class="layui-btn" id="select">查询</button>
            </div>
        </div>
    </form>
</h3>
<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</h3>
<table class="layui-hide" id="test1" lay-filter="test1"></table>
<script src="../layui/layui.all.js"></script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm" id="add">新增用户</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll">删除用户</button>
        <button class="layui-btn layui-btn-sm" lay-event="export">导出用户</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','form','jquery'], function(table, form, $){
        var $ = layui.jquery, table = layui.table, form = layui.form;
        var tableIns = table.render({
            elem: '#test1'
            ,url:'user?opr=list'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'用户编号', width:120, fixed: 'left', unresize: true, sort: true,align: 'center'}
                ,{field:'username', title:'用户名称', width:120, edit: 'text',sort: true}
                ,{field:'address', title:'用户地址', width:300, edit: 'text',sort: true}
                ,{field:'createby', title:'创建者', width:100,sort: true}
                ,{field:'createdate', title:'创建时间',width:400,sort: true,templet: "<div>{{layui.util.toDateString(d.createdate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{field:'', title:'操作',toolbar: '#barDemo'}
            ]]
            ,page: true //开启分页
            ,parseData: function(d){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": d.code, //解析接口状态
                    "msg": d.msg, //解析提示文本
                    "count": d.count, //解析数据长度
                    "data": d.data //解析数据列表
                };
            }
        });

        //头工具栏事件
        table.on('toolbar(test1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delAll':
                    var data = checkStatus.data;
                    var ids = new Array();
                    if(data.length <= 0){
                        layer.msg('如果要删除,请选中一行数据!', {
                            icon: 2,//提示的样式
                            time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                        });
                        return;
                    }
                    for (var i = 0; i < data.length; i++) {
                        ids[i] = data[i].id;
                    }
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: "user?opr=removeAll&ids="+ids.join(),
                        data: {
                        },
                        async: false,
                        error: function (request) {
                            layer.msg('删除失败', {
                                icon: 2,//提示的样式
                                time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                            });
                        },
                        success: function (data) {
                            if(data > 0) {
                                layer.msg('删除成功', {
                                    icon: 1,//提示的样式
                                    time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                    end: function () {
                                        tableIns.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                    }
                                });
                            } else {
                                layer.msg('删除失败', {
                                    icon: 2,//提示的样式
                                    time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                });
                            }
                        }
                    });
                    break;
                case 'export':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test1)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: "user?opr=del&id="+data.id,
                        data: {
                        },
                        async: false,
                        error: function (request) {
                            layer.msg('删除失败', {
                                icon: 2,//提示的样式
                                time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                            });
                        },
                        success: function (data) {
                            if(data > 0) {
                                layer.msg('删除成功', {
                                    icon: 1,//提示的样式
                                    time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                    end: function () {
                                        tableIns.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                    }
                                });
                            } else {
                                layer.msg('删除失败', {
                                    icon: 2,//提示的样式
                                    time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                var othis = $(this);
                var type = othis.data('type');
                layer.open({
                    type: 2
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: 'user?opr=edit&id='+data.id
                    ,btn: ['确认', '取消']
                    ,shade: [0.01, '#000']
                    ,btnAlign: 'c' //按钮居中
                    ,title:'编辑用户'
                    ,area: ['600px', '450px']
                    ,yes: function(index, layero){
                        layero.find('iframe').contents().find("#btn_save_user").click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
            } else if(obj.event === 'detail'){
                var othis = $(this);
                var type = othis.data('type');
                layer.open({
                    type: 2
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: 'user?opr=detail&id='+data.id
                    ,btn: ['关闭']
                    ,shade: [0.01, '#000']
                    ,btnAlign: 'c' //按钮居中
                    ,title:'查看用户'
                    ,area: ['600px', '450px']
                    ,yes: function(index, layero){
                        layer.closeAll();
                    }
                });
            }
        });
        $(function(){

            /*新增条件查询*/
            $("#select").click(function(){
                var cId = $("#address").val();
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        cId: cId
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });

            $("#add").click(function(){
                var othis = $(this);
                var type = othis.data('type');
                layer.open({
                    type: 2
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: 'user?opr=add'
                    ,btn: ['确认', '取消']
                    ,shade: [0.01, '#000']
                    ,btnAlign: 'c' //按钮居中
                    ,title:'添加用户'
                    ,area: ['600px', '450px']
                    ,yes: function(index, layero){
                        layero.find('iframe').contents().find("#btn_save_user").click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
            });
        })
    });
</script>
</body>
</html>